import React, { useState, useEffect } from 'react'
import { ArrowLeft, WapHome, WeappNav } from '@react-vant/icons'
import { Toast } from 'antd-mobile'  // 添加到顶部导入
import { useNavigate,useLocation } from 'react-router-dom';
import styles from "./Jiadetail.module.css"
import dayjs from 'dayjs'
import axios from 'axios';
export default function Jiadetail() {

    useEffect(() => {
        // 进入页面时设置
        const html = document.documentElement;
        const oldFontSize = html.style.fontSize;
        const setRem = () => {
          const width = html.clientWidth < 750 ? 750 : html.clientWidth;
          html.style.fontSize = (width / 750) * 75 + 'px';
        };
        setRem();
        window.addEventListener('resize', setRem);
    
        // 离开页面时恢复
        return () => {
          window.removeEventListener('resize', setRem);
          html.style.fontSize = oldFontSize || '';
        };
      }, []);

      const navigate = useNavigate()
      const location = useLocation();
      const status = location.state;
      console.log(status);
      

      const [list, setList] = useState(() => {
        let array = localStorage.getItem('user')
        return array ? JSON.parse(array) : []
      })



  return (
    <div>
        {/* 顶部 */}

        <div className={styles.top}>
        <div className={styles.content}>
          <div onClick={() => { navigate(-1) }}><ArrowLeft style={{ fontSize: '20px', fontWeight: 'bolder' }} /></div>
          <div className={styles.iconDivider}></div>
          <div onClick={() => { navigate('/zhu') }}><WapHome style={{ fontSize: '20px', fontWeight: 'bolder', paddingRigth: '5px' }} /></div>
        </div>
        <h2>考勤统计</h2>
        <div className={styles.content}>
          <div><WeappNav style={{ fontSize: '25px', fontWeight: 'bolder', paddingLeft: '5px', paddingTop: '5px' }} /></div>
          <div className={styles.iconDivider}></div>
          <div><div className={styles.circleBorder}>
            <div className={styles.circleInner}></div>
          </div></div>
        </div> </div>

         {/* 申报人信息 */}
    <div className={styles.container}>
      <div className={styles.sectionTitle}>申报人信息</div>
      {list.map((item,index)=>{
        return(
          <div className={styles.userInfo} key={index}>
            <img className={styles.avatar} src={item.imgs} alt="avatar" />
            <div className={styles.userMain}>
              <div className={styles.userName}>{item.username}</div>
              <div className={styles.userDept} style={{marginTop:'10px'}}>所属部门：{item.bumen}</div>
            </div>
            <div className={styles.userRole}>
              <div className={styles.roleMain}>{item.zhiye}</div>
              <div className={styles.roleSub}>{item.zhiye=='经理'?'Managere':'Member'}</div>
            </div>
          </div>
        )
      })}

      <div className={styles.sectionTitle}>请假详情</div>
      <div className={styles.leaveInfo}>
        <div className={styles.infoRow}>
          <span className={styles.label}>申请时间：</span>
          <span className={styles.value}>{dayjs(status.attendanceDate).format('YYYY-MM-DD')}</span>
        </div>
        <div className={styles.infoRow}>
          <span className={styles.label}>请假类型：</span>
          <span className={styles.value}>{status?.type || '年假'}</span>
        </div>
        <div className={styles.infoRow}>
          <span className={styles.label}>请假方式：</span>
          <span className={styles.value}>{status.fangshi || '按小时（上午）'}</span>
        </div>
        <div className={styles.infoRow}>
          <span className={styles.label}>开始时间：</span>
          <span className={styles.value}>{dayjs(status.attendanceDate).format('YYYY-MM-DD')}</span>
        </div>
        <div className={styles.infoRow}>
          <span className={styles.label}>结束时间：</span>
          <span className={styles.value}>{dayjs(status.attendanceDate).format('YYYY-MM-DD')}</span>
        </div>
        <div className={styles.reasonBox}>
          <div className={styles.label}>请假原因：</div>
          <div className={styles.reasonContent}>
            <textarea cols={48} rows={10} value={status.yuanyin}></textarea>
          </div>
        </div>
      </div>

      <div className={styles.approvalStatus}>
        <div className={styles.statusItem}>
          <div className={styles.statusDot}>
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=256&h=256" alt="avatar" />
          </div>
          <div className={styles.statusInfo}>
            <div className={styles.statusTitle}>
              <span className={styles.statusName}>同意</span>
              <span className={styles.statusType}>自动审批</span>
            </div>
            <div className={styles.statusDesc}>直接上级审批 雷静</div>
            <div className={styles.statusTime}>2021-03-04 18:20:36</div>
          </div>
        </div>

        <div className={styles.statusItem}>
          <div className={styles.statusDot}>
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=256&h=256" alt="avatar" />
          </div>
          <div className={styles.statusInfo}>
            <div className={styles.statusTitle}>
              <span className={styles.statusName}>等待审批</span>
            </div>
            <div className={styles.statusDesc}>等待行政专员审批流程</div>
          </div>
        </div>

        <div className={`${styles.statusItem} ${styles.lastStatus}`}>
          <div className={styles.statusDot}>
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=256&h=256" alt="avatar" />
          </div>
          <div className={styles.statusInfo}>
            <div className={styles.statusTitle}>
              <span className={styles.statusName}>完成</span>
            </div>
          </div>
        </div>

        <button className={styles.withdrawBtn}
            onClick={()=>{
                console.log(status);
                
                axios.post('http://localhost:3111/attendance/del',{status}).then(res=>{
                    if(res.data.code==200){
                        Toast.show({
                            type: 'success',
                            content: '撤回成功',
                            position: 'center',
                            duration: 1000,
                            afterClose: () => {
                                navigate('/zhu/shou')
                              }
                          });
                    }
                })
            }}
        >撤回</button>
      </div>
    </div>
    </div>

  )
}
